運用content屬性搭配Unicode字符，可以達成一些特別的效果。
下方例子是運用content屬性加上"\A"(即換行字符)，做出圖片或文字加載中的動畫效果。
<style>
span {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
span::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: span 3s infinite step-start both;
}
@keyframes span {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
</style>
<body>
<p>加載中<span>...</span></p>
</body>
iThome鐵人賽
看影片追技術